import { defineComponent, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import './forget.less'
import { LockOutlined } from '@ant-design/icons-vue'
import Icon from '@/components/Icon'
export default defineComponent({
  name: 'ForgetPw',
  setup() {
    type User = {
      account: string
      password: string
      captcha: string
    }
    type Passw = {
      password: string
      new_password: string
    }
    const Router = useRouter()
    const form = reactive<User>({
      account: '',
      password: '',
      captcha: '',
    })
    const form2 = reactive<Passw>({
      password: '',
      new_password: '',
    })
    const status = ref<boolean>(true)

    const onFinish = () => {
      status.value = false
    }
    const onFinish2 = () => {
      console.log(165)
    }
    return () => (
      <div class="forgetBox">
        <div class="top">
          <div class="content">
            <div class="left">
              <span class="title">云车智途</span>
              <span>忘记密码</span>
            </div>
            <div class="bacKBtn">
              <a-button
                type="primary"
                size="small"
                onClick={() => Router.push('/')}
              >
                返回登录页
              </a-button>
            </div>
          </div>
        </div>
        <div class="wapper">
          {status.value ? (
            <a-form
              ref="formRef"
              model={form}
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 18 }}
              onFinish={onFinish}
              // onFinishFailed="onFinishFailed"
            >
              <a-form-item
                label="用户名"
                name="account"
                rules={[{ required: true, message: '请输入账号' }]}
              >
                <a-input
                  placeholder="账号"
                  v-model:value={form.account}
                  v-slots={{
                    prefix: () => <Icon icon="user" colors="#bfbfbf"></Icon>,
                  }}
                />
              </a-form-item>
              <a-form-item
                label="验证码"
                name="password"
                rules={[{ required: true, message: '请输入验证码' }]}
              >
                <div class="pssw">
                  <a-input
                    type="password"
                    placeholder="密码"
                    v-model:value={form.password}
                    v-slots={{
                      prefix: () => (
                        <LockOutlined
                          class="site-form-item-icon"
                          style={{ color: '#bfbfbf' }}
                        />
                      ),
                    }}
                  />
                  <div class="validata"></div>
                </div>
              </a-form-item>
              <a-form-item wrapperCol={{ span: 18, offset: 6 }}>
                <a-button
                  type="primary"
                  html-type="submit"
                  style={{
                    width: '200px',
                    borderRadius: '4px',
                    marginTop: '10px',
                  }}
                >
                  下一步
                </a-button>
              </a-form-item>
            </a-form>
          ) : (
            <a-form
              ref="formRef2"
              model={form2}
              labelCol={{ span: 6 }}
              wrapperCol={{ span: 18 }}
              onFinish={onFinish2}
              // onFinishFailed="onFinishFailed"
            >
              <a-form-item
                label="新密码"
                name="password"
                rules={[{ required: true, message: '请输入账号' }]}
              >
                <a-input
                  placeholder="密码"
                  v-model:value={form2.password}
                  v-slots={{
                    prefix: () => <Icon icon="user" colors="#bfbfbf"></Icon>,
                  }}
                />
              </a-form-item>
              <a-form-item
                label="确认密码"
                name="new_password"
                rules={[{ required: true, message: '请再次输入密码' }]}
              >
                <a-input
                  type="password"
                  placeholder="密码"
                  v-model:value={form2.new_password}
                  v-slots={{
                    prefix: () => (
                      <LockOutlined
                        class="site-form-item-icon"
                        style={{ color: '#bfbfbf' }}
                      />
                    ),
                  }}
                />
              </a-form-item>
              <a-form-item wrapperCol={{ span: 18, offset: 6 }}>
                <a-space size={20}>
                  <a-button style={{ width: '100px', borderRadius: '4px' }}>
                    取消
                  </a-button>
                  <a-button
                    type="primary"
                    html-type="submit"
                    style={{ width: '100px', borderRadius: '4px' }}
                  >
                    确定
                  </a-button>
                </a-space>
              </a-form-item>
            </a-form>
          )}
        </div>
      </div>
    )
  },
})
